<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>炫光心跳</title>
    <style>
        :root {
            --heart-size: min(80vw, 400px);
            --primary-color: #ff0077;
            --secondary-color: #00ffff;
        }

        body {
            background: #000;
            margin: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            cursor: pointer;
        }

        /* 心形样式 */
        .heart-container {
            position: relative;
            width: var(--heart-size);
            height: var(--heart-size);
            margin-bottom: 5vh;
            z-index: 3;
        }

        .heart {
            position: absolute;
            width: 100%;
            height: 100%;
            animation: heartbeat 1.2s ease-in-out infinite;
        }

        .heart::before,
        .heart::after {
            content: '';
            position: absolute;
            width: 50%;
            height: 80%;
            background: linear-gradient(45deg, 
                var(--primary-color), 
                #ff00ff, 
                var(--secondary-color));
            border-radius: 100px 100px 0 0;
            box-shadow: 0 0 100px rgba(255,0,119,0.4);
        }

        .heart::before {
            left: 50%;
            transform: rotate(-45deg);
            transform-origin: 0 100%;
        }

        .heart::after {
            left: 0;
            transform: rotate(45deg);
            transform-origin: 100% 100%;
        }

        /* 文字效果 */
        .text {
            font-size: clamp(24px, 8vw, 48px);
            font-family: 'Microsoft YaHei', sans-serif;
            background: linear-gradient(45deg, 
                var(--primary-color), 
                #ff99ff, 
                var(--secondary-color));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 0 15px rgba(255,0,119,0.5),
                       0 0 30px rgba(255,0,255,0.3),
                       0 0 45px rgba(0,255,255,0.2);
            animation: textGlow 2s ease-in-out infinite;
            z-index: 2;
            position: relative;
            margin-top: -3vh;
            white-space: nowrap;
        }

        /* 背景光晕 */
        .glow {
            position: absolute;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, 
                rgba(255,0,119,0.6) 0%,
                rgba(255,0,255,0.4) 30%,
                rgba(0,255,255,0.2) 60%,
                transparent 100%);
            animation: rotate 8s linear infinite;
            z-index: 0;
        }

        /* 动态粒子 */
        .particles {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .particle {
            position: absolute;
            background: rgba(255,255,255,0.8);
            border-radius: 50%;
            animation: particle 2s infinite;
            width: 6px;
            height: 6px;
        }

        /* 烟花效果 */
        .firework {
            position: absolute;
            pointer-events: none;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            z-index: 4;
            opacity: 0;
            will-change: transform, opacity;
        }

        /* 动画定义 */
        @keyframes heartbeat {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.08); }
        }

        @keyframes textGlow {
            0%, 100% { transform: scale(1); opacity: 0.9; }
            50% { transform: scale(1.15); opacity: 1; }
        }

        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @keyframes particle {
            0% { transform: translateY(0); opacity: 0; }
            50% { opacity: 1; }
            100% { transform: translateY(-10vh); opacity: 0; }
        }

        /* 移动端适配 */
        @media (max-width: 768px) {
            .heart-container {
                margin-bottom: 3vh;
            }
            .text {
                margin-top: -1vh;
                font-size: clamp(20px, 6vw, 36px);
            }
            .particle {
                width: 4px;
                height: 4px;
            }
        }
    </style>
</head>
<body>
    <div class="glow"></div>
    <div class="heart-container">
        <div class="heart"></div>
    </div>
    <div class="text">泡沫我♥你</div>
    <div class="particles"></div>

    <script>
        (function() {
            // 初始化粒子系统
            function initParticles() {
                const container = document.querySelector('.particles');
                const particleCount = window.innerWidth < 768 ? 80 : 150;
                
                for(let i=0; i<particleCount; i++) {
                    const particle = document.createElement('div');
                    particle.className = 'particle';
                    particle.style.left = Math.random() * 100 + '%';
                    particle.style.top = Math.random() * 100 + '%';
                    particle.style.animationDelay = Math.random() * 2 + 's';
                    container.appendChild(particle);
                }
            }

            // 烟花系统
            const FIREWORK_POOL = [];
            const POOL_SIZE = 30;
            
            function initFireworkPool() {
                for(let i=0; i<POOL_SIZE; i++) {
                    const particle = document.createElement('div');
                    particle.className = 'firework';
                    particle.style.display = 'none';
                    document.body.appendChild(particle);
                    FIREWORK_POOL.push(particle);
                }
            }

            // 音频系统
            let audioContext, isPlaying = false;
            const soundPreset = {
                baseFreq: 120,
                variance: 20,
                duration: 0.3,
                volume: 0.5
            };

            function initAudio() {
                try {
                    audioContext = new (window.AudioContext || window.webkitAudioContext)();
                } catch(e) {
                    console.log('浏览器不支持Web Audio API');
                }
            }

            function playHeartbeat() {
                if(!audioContext) return;
                
                const now = audioContext.currentTime;
                const osc = audioContext.createOscillator();
                const gainNode = audioContext.createGain();
                
                osc.type = 'sine';
                osc.frequency.setValueAtTime(
                    soundPreset.baseFreq + Math.random() * soundPreset.variance, 
                    now
                );
                
                gainNode.gain.setValueAtTime(soundPreset.volume, now);
                gainNode.gain.exponentialRampToValueAtTime(0.01, now + soundPreset.duration);
                
                osc.connect(gainNode);
                gainNode.connect(audioContext.destination);
                
                osc.start();
                osc.stop(now + soundPreset.duration);
            }

            // 交互处理
            function handleInteraction(e) {
                if(!isPlaying && audioContext) {
                    audioContext.resume().then(() => {
                        setInterval(playHeartbeat, 1200);
                        isPlaying = true;
                    });
                }
                createFirework(e);
            }

            // 烟花效果
            function createFirework(e) {
                const colors = ['#ff0077', '#ff00ff', '#00ffff'];
                const pos = e.touches ? e.touches[0] : e;
                const count = window.innerWidth < 768 ? 12 : 20;
                
                for(let i=0; i<count; i++) {
                    const particle = getAvailableParticle();
                    if(!particle) continue;
                    
                    const angle = (Math.PI * 2 * i)/count;
                    const velocity = Math.random() * 80 + 70;
                    const color = colors[i%colors.length];
                    
                    Object.assign(particle.style, {
                        display: 'block',
                        left: pos.clientX + 'px',
                        top: pos.clientY + 'px',
                        background: color,
                        boxShadow: `0 0 25px ${color}`
                    });
                    
                    particle.animate([
                        { transform: 'scale(1) translate(0,0)', opacity: 1 },
                        { 
                            transform: `scale(2.5) translate(${Math.cos(angle)*velocity}px, ${Math.sin(angle)*velocity}px)`,
                            opacity: 0 
                        }
                    ], {
                        duration: 700,
                        easing: 'ease-out'
                    }).onfinish = () => particle.style.display = 'none';
                }
            }

            function getAvailableParticle() {
                return FIREWORK_POOL.find(p => p.style.display === 'none');
            }

            // 初始化入口
            document.addEventListener('DOMContentLoaded', () => {
                initParticles();
                initFireworkPool();
                initAudio();
                
                document.addEventListener('click', handleInteraction);
                document.addEventListener('touchstart', (e) => {
                    e.preventDefault();
                    handleInteraction(e);
                }, { passive: false });
            });
        })();
    </script>
</body>
</html>
